<template>
	<view class="page">
		<Navbar title="周边景点详情" />
		<u-sticky customNavHeight="0" z-index="6">
			<u-image show-loading :src="detail.cover_img" width="100%" height="248px" @click="preImage" />
		</u-sticky>
		<view class="body">
			<view class="padding">
				<Sub-title :label="detail.title" bottom-color="#E9F4F4" />
				<u-text :text="detail.address || ''" prefix-icon="map-fill"
					icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx" lines="1" line-height="60rpx"
					color="#979797" size="28rpx" @click="handleMap" />
			</view>
			<u-gap height="8rpx" bg-color="#F6F6FB" />
			<view class="padding">
				<Sub-title label="景点详情" bottom-color="#E9F4F4" />
				<u-parse :content="detail.content" />
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar/index";

	import {
		qiuAroundDetail
	} from "@/request/qiuApi.js";
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				detail: {},
			};
		},
		onLoad(e) {
			this.getData(e.id);
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		methods: {
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.cover_img],
				});
			},
			// 跳转地图
			handleMap() {
				// let result = this.$store.dispatch("permission/requestPermissions",
				// 	'ACCESS_FINE_LOCATION')
				// if (result !== 1) return
				const {
					lat,
					lng,
					address
				} = this.detail;
				// uni.openLocation({
				//   latitude: lat,
				//   longitude: lng,
				//   address: address,
				//   scale: 16,
				// });
				uni.navigateTo({
					url: `/pages/parse/map?lat=${lat}&lng=${lng}`
				});
			},
			// 获取详情
			getData(id) {
				qiuAroundDetail({
					id
				}).then((res) => {
					if (res.code == 1) {
						this.detail = res.data;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.body {
			width: 100%;
			z-index: 8;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: -80rpx;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;

			.padding {
				padding: 20rpx;
			}
		}
	}
</style>